<template>
  <div class="chat-wrapper">
		<section class="chat-content">
			<pre v-for="item in message">
				<div :class="item.role">
					<pre>{{item.content}}</pre>
				</div>
			</pre>
		</section>
		<section class="chat-input">
			<el-input type="textarea" @keydown="submit" :rows="3" v-model="msg" placeholder="请输入症状"></el-input>
		</section>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
const msg = ref('')
const message = reactive([
	{
	  "content": "我是一个医疗助手,擅长通过症状来分析应该挂哪个科室的号,用户如果不清楚可以问我,但是我拒绝回答除医疗外其他的问题",
	  "role": "system"
	}
])
const content = ref('')


function submit (event) {
	if (event.keyCode === 13 && event.shiftKey) {
		// 阻止默认
		event.preventDefault()
		message.push({
			 "content": `我的症状是:${msg.value},请根据我的症状分析我应该去医院挂哪个科室`,
				"role": "user"
		})
		msg.value = ''
		const data = JSON.stringify({
		  "messages": message,
		  "model": "deepseek-chat",
		  "frequency_penalty": 0,
		  "max_tokens": 2048,
		  "presence_penalty": 0,
		  "response_format": {
		    "type": "text"
		  },
		  "stop": null,
		  "stream": true,
		  "stream_options": null,
		  "temperature": 1,
		  "top_p": 1,
		  "tools": null,
		  "tool_choice": "none",
		  "logprobs": false,
		  "top_logprobs": null
		})
		const config = {
		  method: 'post',
			maxBodyLength: Infinity,
		  url: 'https://api.deepseek.com/chat/completions',
		  headers: { 
		    'Content-Type': 'application/json', 
		    'Accept': 'application/json', 
		    'Authorization': 'Bearer sk-adaaf504ec334c93b8978b9ac9232bce'
		  },
		  data : data
		}
		axios.request(config).then(response => {
			const result = reactive({
				"content": '',
				"role": "assistant"
			})
			message.push(result)
			const array = response.data.split('\n\n')
			for (const i in array) {
				const str = array[i].substring(6)
				if (str === '[DONE]') {
					break
				} else {
					const json = JSON.parse(str)
					console.dir(JSON.parse(str))
					setTimeout(function() {
						result.content += json.choices[0].delta.content
					}, i * 50)
				}
			}
		})
	}
}
</script>

<style scoped lang="scss">
.chat-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	.chat-content {
		flex: 1;
		overflow-y: auto;
		.user {
			text-align: right;
		}
		pre {
			white-space: pre-wrap;
		}
	}
	.chat-input {
		height: 100px;
	}
}

</style>